<template>
  <div class="content">
    <van-nav-bar title="购物车" left-text="返回">
      <template #left>
        <van-icon name="arrow-left" size="18" @click="$router.back()" />
      </template>
      <template #right>
        <van-icon name="ellipsis" size="18" />
      </template>
    </van-nav-bar>
    <van-swipe-cell
      v-for="item in store.CartList"
      :key="item.goodsId"
      v-show="store.CartList.length > 0"
    >
      <van-checkbox v-model="item.checked"></van-checkbox>
      <van-card
        :price="item.sellingPrice"
        :title="item.goodsName"
        class="goods-card"
        :thumb="item.goodsCoverImg"
      />
      <template #right>
        <van-button
          square
          text="删除"
          type="danger"
          class="delete-button"
          @click="deleteClick(item.cartItemId)"
        />
      </template>
      <van-stepper v-model="item.goodsCount" @change="change(item)" />
    </van-swipe-cell>
    <van-submit-bar
      :price="totalmoney"
      button-text="提交订单"
      @submit="onSubmit"
      v-show="store.CartList.length>0"
    >
      <van-checkbox v-model="checkedall">全选</van-checkbox>
      <template #tip>
        你的收货地址不支持配送, <span @click="onClickLink">修改地址</span>
      </template>
    </van-submit-bar>
  </div>
</template>
<script setup>
import { onMounted,computed,ref } from "vue";
import { useCart } from "@/store/store.js";
import { delcartlist } from "@/api/index.js";
import { showSuccessToast, showFailToast } from "vant";
import { useRoute, useRouter } from "vue-router";
import {storeToRefs} from "pinia"
let route = useRoute();
let router = useRouter();
let store = useCart();
onMounted(() => {
  store.getmycartlist();
});

//获取购物车数据
let {CartList}=storeToRefs(store)
//被选中的商品id
let cartcheckedids=ref([])
//点击删除
let deleteClick = (id) => {
  store.delmycartlist(id);
};
//点击步进器
let change = (item) => {
  store.putmycartnum(item.cartItemId, item.goodsCount);
  //  store.getmycartlist()
};
//总价
let totalmoney=computed(()=>{
  return store.CartList.reduce((prev,next)=>{
        return (prev+(next.checked?next.goodsCount*next.sellingPrice*100:0))
  },0)
})
//全选反选
let checkedall=computed({
  get(){
    return store.CartList.every(item=>item.checked)
  },
  set(val){
    store.CartList.forEach(element => {
      element.checked=val
    });
  }
})
//提交订单
let onSubmit=()=>{
  CartList.value.filter(item=>{
    if(item.checked){
      cartcheckedids.value.push(item.cartItemId)
    }
  })
  localStorage.setItem("cartcheckedids",cartcheckedids.value)
   router.push("/addresslist")
}
//修改地址
let onClickLink=()=>{
  
}
</script>

<style lang="less" scoped>
.content {
  padding-bottom: 120px;
}
.van-swipe-cell {
  overflow: hidden;
  position: relative;
  padding-left: 10px;
  .van-stepper {
    position: absolute;
    bottom: 0;
    right: 20px;
  }

  .van-checkbox {
    width: 20px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #f7f8fa;
  }

  .van-card {
    padding: 0;
    margin-left: 20px;

    .van-card__content {
      width: 245px;
      height: 100%;
      justify-content: center;

      .van-card__bottom {
        text-align: left;
        margin-top: 7px;

        span {
          color: red;
        }
      }
    }
  }

  .delete-button {
    height: 100%;
  }
}
.van-submit-bar {
  margin-bottom: 50px;
}
</style>
